<!--
// +----------------------------------------------------------------------
// | Created by PHPstorm: JRKAdmin框架 [ JRKAdmin ]
// +----------------------------------------------------------------------
// | Copyright (c) 2019~2022 [LuckyHHY] All rights reserved.
// +----------------------------------------------------------------------
// | SiteUrl: http://www.luckyhhy.cn
// +----------------------------------------------------------------------
// | Author: LuckyHhy <jackhhy520@qq.com>
// +----------------------------------------------------------------------
// | Date: 2020/3/10-17:16
// +----------------------------------------------------------------------
// | Description:
// +----------------------------------------------------------------------
*-->

{extend name='public/window' /}

{block name="content"}

<link rel="stylesheet" href="__ADMIN__/css/admin.css?v=312">
<link rel="stylesheet" href="__ADMIN__/css/sub-page.css">
<link rel="stylesheet" href="__ADMIN__/css/fileCommon.css">

<style >

    @media screen and (max-width: 420px) {
        .btnDiv {
            padding-top: 30px;
            text-align: left;
        }
    }

    .showBB .bottomBar {
        display: block;
    }

</style >


<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">

            <div class="layui-card">
                <div class="layui-card-body">

                    <div class="layui-form">

                        <div class="file-list">
                            {volist name="data" id="vo"}
                            <div class="file-list-item"  data-url="{$vo}" >
                                <div class="file-list-img media " >
                                    <img class="lazy" alt="ss" data-original="{$vo}"  />
                                </div>
                                <!--<div class="file-list-name">123</div>-->
                            </div>
                            {/volist}
                        </div>


                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
<!-- 下拉菜单 -->
<div class="dropdown-menu dropdown-anchor-top-left" id="dropdownFile">
    <div class="dropdown-anchor"></div>
    <ul>
        <li><a id="open"><i class="layui-icon layui-icon-file"></i> 查看 </a></li>
    </ul>
</div>


<script type="text/javascript" src="__ADMIN__/js/clipboard.min.js"></script>

<script type="text/javascript" src=__ADMIN__/js/jquery.lazyload.min.js?v=1.9.1"></script>

<script type="text/javascript" charset="utf-8">
    $(function() {
        $("img.lazy").lazyload({effect: "fadeIn",threshold: 100});
    });
</script>

<script>

    layui.use(['jquery', 'layer', 'element', 'upload',  'util' ,'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var upload = layui.upload;
        var util = layui.util;
        var form = layui.form;

        var mUrl; //素材地址
        // 列表点击事件
        $('body').on('click', '.file-list-item > .file-list-img', function (e) {

            mUrl = $(this).parent().data('url');

            var $target = $(this);
            $('#dropdownFile').css({
                'top': $target.offset().top + 90,
                'left': $target.offset().left + 25
            });
            $('#dropdownFile').addClass('dropdown-opened');
            if (e !== void 0) {
                e.preventDefault();
                e.stopPropagation();
            }
        });


        // 点击空白隐藏下拉框
        $('html').off('click.dropdown').on('click.dropdown', function () {
            $('#dropdownFile').removeClass('dropdown-opened');
        });


        // 打开
        $('#open').click(function () {
            layer.photos({
                photos: {
                    title: "查看图片",
                    data: [{
                        src: mUrl
                    }]
                },
                shade: .01,
                closeBtn: 1,
                anim: 5
            });
        });


        form.on('submit(add)', function (data) {

        });

    });
</script>


{/block}
